Primeramente vamos a localizar el lugar donde haremos las modificaciones, nos situamos en este orden:
Panel/Diseño/Plantilla/Edición de HTML
Buscaremos en nuestra plantilla los CSS justo antes de ]]></b:skin> es el lugar idoneo para aplicar nuestro código.
A continuación copiaremos y pegaremos los códigos dependiendo de la parte que deseamos añadir una imagen tipo icono.
"Imagen en CATEGORÍAS - ETIQUETAS"
.post-labels{
padding-left:20px;
padding-top:5px;
background: url(url_de_la_imagen) center left no-repeat;
}
"Imagen en FECHA"
.comment-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_la_imagen) center left no-repeat;
}
"Imagen en COMENTARIOS"
.comment-link{
padding-left:20px;
padding-top:5px;
background: url(url_de_la_imagen) center left no-repeat;
}
"Imagen en HORA"
.post-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_la_imagen) center left no-repeat;
}
"Imagen en (Publicado por) o AUTOR"
.post-author{
padding-left:20px;
padding-top:5px;
background: url(url_de_la_imagen) center left no-repeat;
}
(Donde dice url_de_la_imagen hay que añadir la url de la imagen seleccionada)
Páginas donde encontraréis variedad en imágenes tamaño 16X16 tipo iconos.
famfamfam.com
graphicpush.com
Crystal_Clear
intersmash.com
thinkwasabi.com
sweetie
e-lusion
fasticon
pinvoke
somerandomdude
Si deseas añadir una imagen tipo icono junto a la fecha mira aquí.
!Suerte¡
Reproductor de vídeo/fotografías con efectos especiales (muveeMix) |
|
▼ |
Espacio para alojar vídeos e imágenes con la particularidad de poder agregarle efectos especiales y música.
Para obtener un vídeo como el del ejemplo lo primero de todo es registrarse para obtener una cuenta.
Una vez registrados recibiremos en nuestro mail un mensaje de confirmación que debemos activar (Es la única forma de poder visionar los vídeos creados)
(Recomiendan que no sean menos de 10 fotografías ni más de 100)
Entre los formatos de video permitido tenemos: MPG, MPEG, AVI y WMV.en imágenes podemos subir Jpg, Gif y Bmp.
Cada vez que alojamos un archivo debemos después clicar en Nex y seguidamente de nuevo en Add vid/pics hasta completar el proceso.
Una vez alojadas las imágenes o vídeos añadimos la música, podemos escoger en nuestro PC clicando en My music o escoger la que nos proporciona MuveeMix (El formato debe ser MP3 o WMA)
Con lo cual comenzará el proceso de subir las fotos o vídeos, más tarde nos será notificado por e-mail y podremos obtener el código o enlace para añadir en nuestra Web.
Y eso es todo, podremos visionar nuestras obras de arte clicando en View my muvees y comenzar de nuevo en Mix another muevee
(No olvidar que el código para añadir en nuestro blog nos llegará a nuestro mail mediante un enlace directo. Cuando accedemos por ese enlace directo podemos visionar el último muvee que alojamos y a la derecha el código y enlace para añadir a nuestro espacio)
Tutorial: Gem@
Galería de imágenes en tus entradas |
|
▼ |
Para aplicar esta galería debemos primero añadir en la CSS de nuestro blog el siguiente código:
CSSCREATOR (Generador de botones) |
|
▼ |
CSSCREATOR
No hay mucho que explicar sobre él, es un sencillo generador de botones CSS que genera el código listo para añadir a la sidebar del blog incluido el enlace a nuestra página.
Dumpr (Efectos especiales para tus imágenes) |
|
▼ |
Crazyprofile (Relojes con imágenes desde tu PC) |
|
▼ |
Crazyprofile es una Web donde encontraréis relojes, calendarios, posters, gráficos, generadores de Glitters y entretenimiento por varias horas si visitáis cada uno de los temas que ofrecen.
Hay uno que me ha llamado la atención, es diferente, es un reloj al que podéis añadir una fotografía o imagen desde vuestro PC.
Para crear un reloj como el ejemplo aquí.
(No me hizo mucha gracia ver a Yako con esas agujas que marcan las horas en su linda carita, pero bueno, eso es señal que es mi modelo favorito)
Primer año... |
|
▼ |
Mantener un blog requiere constancia y tiempo, pienso que para quien es su medio de vida no debe resultarle tan gratificante como para los que hacemos del blog un medio de diversión o pasatiempo ¿He dicho algo extraño?
Cada caso es un mundo y cada persona también, me gusta lo que hago, disfruto con ello, habrá quien no lo entienda pero no es algo que me preocupe.
¿Perder el tiempo? ni hablar, perder el tiempo es dejar pasar las horas haciendo algo que le gusta a los demás sin tener en cuenta nuestras prioridades.
A veces me han comentado que no pueden dedicar tanto tiempo al blog como les gustaría, y siento pena, no porque se trate del blog precisamente, sino porque cada persona es libre de decidir a qué dedica su tiempo libre.
Supongo que es algo relacionado con la mentalidad, no sé...
La felicidad es tan efímera que cuesta creer que haya personas capaces de recortar ese pedacito de espacio que nos pertenece.
Desde ese pedacito mío, el que dedico a este blog y donde nadie más que vosotros y yo tenemos cabida quiero daros las gracias por hacer posible que Gem@ BLOG siga creciendo cada día.
Blingee (Personalizador de imágenes con animaciones) |
|
▼ |
Blingee es un personalizador de imágenes con animaciones. El proceso es sencillo, solo debéis subir una imagen desde vuestro PC o añadir la dirección.
Encontraréis pinceles, herramientas de relleno, de zoom y rotación. En la parte de abajo hay una pestaña con las más populares, más dinámicas, tinta sólida y de comienzo.
Personalized Glitter Graphics
Una vez finalizado, podemos guardar la imagen y añadirla a nuestro blog con el código que nos facilitan, compartir por correo electrónico o enviar como una postal electrónica.
Para el ejemplo escogí el código proporcionado a la imagen de mayor tamaño Size: 396x396 (4 of 4) creo que esa sonrisa es un motivo justificado.
Vía: Genbeta
Crear un blog en Blogger. |
|
▼ |
Y buscando ese vídeo encontré esta otra dirección donde podéis seguir las explicaciones: www.mijarosoft.com
El anterior enlace tarda un poco en cargar la página, pero vale la pena.
Por si dos fueran pocos aquí uno más y en español creado por Ana Ovando.
Añadir imagen y color a la sidebar |
|
▼ |
Calvosaez me preguntaba como añadir una imagen de fondo a la sidebar.
He recordado una entrada de Rosa donde explica como añadir una ´´sidebar colorida`` basándose en las explicaciones de Blogger Hacked
Rosa le añade algún extra a la CSS para personalizar la sidebar, ya su vez voy a darle un retoque para intentar así esclarecer un poco las dudas de Calvosaez.
En un principio le añadiremos color a la sidebar con el truco original de Blogger Hacked.
Nos debemos situar en Plantilla/HTML vamos a añadir justo encima de ]]></b:skin> lo siguiente:
.even {
background-color: #EEEEEE;
}
.odd {
background-color: #AAAAAA;
}
Luego justo antes del </head> de la plantilla añadimos este código:
<script src='http://bloggerhacked.googlepages.com/prototype.js' type='text/javascript'></script>
<script src='http://bloggerhacked.googlepages.com/evenodd.js' type='text/javascript'></script>
El resultado sería algo así:
Si deseamos añadir un borde o redondear las esquinas Rosa nos propone añadir lo siguiente:
.even {
background-color: #EEEEEE;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: solid #000000 1px;
}
.odd {
background-color: #AAAAAA;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: solid #000000 1px;
}
El resultado sería el siguiente:
Ahora vamos a dar solución a Calvosaez con la idea de añadir una imagen de fondo.
Nos situaremos en el primer código añadido osea en:
.even {
background-color: #EEEEEE;
}
.odd {
background-color: #AAAAAA;
}
Y agregaremos background:url('aquí la url de la imagen'); en lugar de background-color: #AAAAAA; y background-color: #EEEEEE; de manera que quedaría asi:
.even {
background:url('aquí la url de la imagen');
}
.odd {
background:url('aquí la url de la imagen');
}
El resultado sería más o menos este:
Recordad que la opción de añadir color hará que cada nuevo elemento añadido en la sidebar aparezca envuelto en un cuadro donde podéis alternar colores escogidos previamente.
!Suerte¡
Imagen que enlaza ll parte |
|
▼ |
En su día hice una pequeña guía de cómo agregar un link a una imagen, hoy he querido detallar ese explicación dedicando esta entrada a Isa que desea aplicar en su blog un buscador personalizado de Google.
Tratándose de Google y de una página dedicada a un bebé he escogido para el ejemplo esta imagen (Por supuesto vale cualquier otra)
Dejaremos en blanco el espacio del título, y en Contenido añadiremos lo siguiente:
<a href='aqui la url de la pagina'>
<img border='0' height='100' src='aqui la url de la imagen ' width='200'/></a>
Seguidamente debemos agregar la Url como indica el código, donde dice aquí la url de la imagen pegaremos la Url de la imagen de Imageshack que tenemos en espera. Donde dice aquí la url de la página añadiremos la Url proporcionada por Goglogo.
Quedaría algo así:
<a href='http://www.goglogo.com/s.asp?lo=Javier'> <img border='0' height='100' src='http://img517.imageshack.us/img517/6779/earthmday05hl2.gif ' width='200'/></a> |
Los valores width y height son una opción de orientación y ayuda para modificar el tamaño de la imagen que hará de enlace, si tenemos el tamaño deseado podemos prescindir de ello y agregar simplemente:
<a href="http://www.goglogo.com/s.asp?lo=Javier"> <img src="http://img517.imageshack.us/img517/6779/earthmday05hl2.gif" /></a> |
Guardamos los cambios y ya solamente nos queda arrastrar esa etiqueta hasta el lugar que deseamos aparezca nuestra imagen, en este caso el buscador personalizado.
Eso es todo... !Suerte¡
Añadir nuestro e-mail |
|
▼ |
Me preguntan el código para añadir una imagen que nos lleve al editor del envío de e-mail.
Para el ejemplo he añadido una imagen tipo botón de Gmail, el código es el siguiente:
<a href="mailto:aquí tu direccion de correo" target="_blank" title="aquí texto informativo"><img src="aquí la url de la imagen"></a>
A ese código añadimos el atributo target="_blank para abrir en ventana aparte, también title=" con el que podremos añadir un texto adicional que nos mostrará al pasar el ratón por encima.
- Resultado:
<a href="mailto:aquí tu dirección de correo" target="_blank" title="aquí texto informativo">aquí el texto ejemplo E-mail</a>
- Resultado:
E-mail
Algo que decir... |
|
▼ |
He estado unos días saturada de trabajo, contesto a todos los comentarios a la mayor brevedad así como a las consultas que van llegando a mi mail.
Sólo pido paciencia, puede que tu pregunta tenga respuesta en un post, es una forma de aprender todos.
Si en tres días no has obtenido respuesta recuérdame la consulta, no me molesta que lo hagas, todo lo contrario.
Eliminar iconos de navegación |
|
▼ |
Abraham me preguntaba el otro día la forma de hacer desaparecer el texto de navegación que aparece al final de cada entrada.
Como algunos recordaréis aplicamos en lugar del texto unos iconos de navegación, la forma de
hacer desaparecer esas imágenes es eliminando los tres códigos de imagen:
<img src='http://img58.imageshack.us/img58/8076/leftxv5.png'/>
<img src='http://img260.imageshack.us/img260/9691/rightli5.png'/>
<img src='http://img260.imageshack.us/img260/6710/homepngrg7.jpg'/>
De este modo el código de navegación no lo modificamos y siempre estamos a tiempo de añadir en cualquier momento las imágenes.
Quiero añadir que aunque para Abraham resulte de utilidad eliminar esta parte del blog no lo es así para los blogs que tienen gran número de entradas ya que con esta utilidad nos ayuda a movernos y encontrar de forma práctica cualquier entrada.
Eliminar el suscribirse a entradas Atom |
|
▼ |
Podemos eliminar el texto Suscribirse a entradas Atom con un simple click.
Nos situamos en Plantilla/Opciones/Feed del Sitio.
Donde dice: Permitir feed del blog sustituimos Completo a Ninguno
» Si deseamos eliminar el texto de Suscribirse a entradas Atom sin prescindir de esta utilidad recomiendo esta segunda opción.
Dejamos en "completo" para permitir feed del blog y buscamos en nuestra plantilla:
.feed-links {
clear: both;
line-height: 2.5em;
}
Y sustituirlo por lo siguiente:
.feed-links {
clear: both;
line-height: 2.5em;
visibility:hidden;
display:none;
}
17 de Mayo Día de Internet |
|
▼ |
El día de Internet se celebra en España el 17 de mayo, impulsado por la Asociación de Usuarios de Internet
Se celebró por primera vez el 25 de octubre de 2005. Poco tiempo después, la Cumbre de la Sociedad de la Información celebrada en Túnez en Noviembre de 2.005 decidió proponer a la ONU la designación del 17 de mayo como el Día Mundial de la Sociedad de la Información, por lo que se movió el denominado Día de Internet a dicha fecha.
En España la tercera edición del día de Internet se traslada a Málaga, y con él la ceremonia oficial de entrega de premios, que se realizará en el Palacio de Ferias y Congresos de la ciudad andaluza.
La gala de premios coincidirá con el Día Mundial de Internet, el 17 de mayo, será una ceremonia abierta al público, y todo aquel que quiera podrá acercarse al Palacio de Ferias y Congresos de Málaga a presenciar la entrega de premios.
Para poder asistir a este acto sólo tienes que registrarte.
Notlar ve notalar (Blogger beta) |
|
▼ |
Poco a poco van surgiendo nuevas plantillas para Blogger beta aunque no tantas como nos gustaría, las que traigo a continuación las he encontrado gracias a J.Miur de Vagabundia.
Se descargan por medio de archivo zip el cual nos proporciona el código de plantilla y las imágenes.
Cumplealerta (Recibe alertas en tu casilla de correo ) |
|
▼ |
Lo recibí en mi mail el otro día, alguien deseaba saber la fecha de mi cumpleaños para felicitarme llegado ese día , todo un detalle. Cumplealerta me mandó un pequeño formulario donde añadiendo el día y el mes de nacimiento ya es suficiente.
Cumplealerta envía un email a todos tus amigos para que ingresen sus cumpleaños en tu calendario.
Recibe alertas en tu casilla de correo avisándote de la llegada de sus cumpleaños.
Ya no tienes excusa.
Photobucket (Hosting de imágenes,álbunes, slideshow, vídeos) |
|
▼ |
Es la noticia de estos días MySpace compró Photobucket por una cifra cercana a los 300 millones de dólares.
Como todos sabéis Photobucket es un hosting de imágenes, también tiene funciones para crear álbunes, slideshow, vídeos, y ahora con nuevas mejoras como la barra de navegación o la variedad en sus contenidos.
Una pequeña muestra:
Utilidad de la plantilla de entrada |
|
▼ |
- La plantilla de entrada es el lugar donde almacenar todo aquello que deseamos aparezca en las entradas.
- Sirve para no tener que copiar y pegar repetidamente un código que usamos con frecuencia.Todo lo que añadas a la plantilla de entrada aparece en las entradas que edites a partir de ese momento.
- La encontraremos en este orden: Panel/Opciones/Formato/Plantilla de entrada
- La utilidad depende de las necesidades de cada uno, podemos añadir desde un texto a una imagen, o el código para expandir las entradas, una barra separadora de post, nuestra firma... Tu imaginación a la hora de añadir algo es lo que cuenta.
Al eliminar en una entrada lo añadido en la plantilla de entrada no impide que aparezca en las siguientes entradas.
Recursos blog & Web (Blogger beta) |
|
▼ |
Y siguen apareciendo plantillas para Blogger beta esta vez en el blog de Francisco Recursos Blog & Web donde encontraréis más plantillas y recursos para Blogger.
Softonic (Descarga de programas gratuitos) |
|
▼ |
Si estás pensando en comprar un programa para tu PC te recomiendo visitar antes Softonic la descarga es gratuita, el periodo de prueba en los programas oscila entre los quince, veintiuno o treinta días (hay algunos que no tienen caducidad)
Siempre será mejor probar antes de comprar por si no resulta ser lo que esperábamos.
Archivos en desplegable (Plantilla clásica) |
|
▼ |
No todos usamos una plantilla para el nuevo Blogger, algunos no están dispuestos al cambio pero no por ello deben prescindir de hacer cambios en el blog o realizar algunas mejoras.
Esta explicación nos dará como resultado un cambio bien visible para el blog. Los archivos con el tiempo van en aumento y forman una larga lista poco estética, en su lugar vamos a incorporar un desplegable donde almacenar todos los meses y años que tenga el blog.
Buscamos en la plantilla lo siguiente:
<MainOrArchivePage>
<h2 class="sidebar-title"><$I18NArchives$></h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
Y la sustituimos por esto:
<select name="archivemenu" onchange=
"document.location.href=this.options[this.selectedIndex].value;">
<option selected>- Archivos -</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
No olvidéis mirar siempre en vista previa antes de guardar los cambios y tener siempre una copia de la plantilla por lo que pueda pasar.
Desplegar y recoger ( cualquier parte del blog) |
|
▼ |
ymmot tuvo ayer la amabilidad de visitarme y dejar constancia de un código para expandir y recoger zonas del blog lo que llamamos swicht. .
Lo que ymmot quizás no sabía es que llevo días con este mismo código intentando darle un
cambio que otro día comentaré.
Aunque los cambios a realizar son mínimos ymmot recomienda hacer una copia de seguridad de nuestra plantilla (Excelente consejo) Voy a hacer un resumen del post de ymmot
Nos situamos en Plantilla y buscamos la etiqueta </head>
Justo antes de </head> deberemos añadir el siguiente código:
<style type='text/css'>
.ver_menu { display:block; }
.ocultar_menu { display:none; }
</style>
<script type='text/JavaScript'>
function desplegar(categoria){
var menu = document.getElementById(categoria);
if(menu.className == "ver_menu"){
menu.className = "ocultar_menu";
}
else{ menu.className = "ver_menu"; } }
</script>
<script type='text/JavaScript'></script>
<div class="UNIQUENAME">
<a href='javascript:desplegar("UNIQUENAME");'>
<img borde='0' height='35' src='aquí la url de la imagen' width='35'/></a>
<ul class='ocultar_menu' id="UNIQUENAME">
En este espacio todo lo que deseamos ocultar,
texto, imágenes, vídeos ect. ect, ect...
</ul></div>
En el código que debemos añadir para desplegar (el segundo) os daréis cuenta que UNIQUENAME se repite tres veces, UNIQUENAME quiere decir NOMBRE UNICO no podemos repetir ese mismo nombre si decidimos añadir otro swicht o lo que es lo mismo podemos añadir todos los swicht que deseamos siempre que le cambiemos el nombre.
(En lugar de UNIQUENAME cualquier otro, da igual el que sea, no se visualiza en el blog)
Y bien, este es el ejemplo o mejor dicho el resultado de lo que habéis leído hasta ahora:
(Clica en la mano para ver el efecto )
¿Un café?
Vídeos, música, un listado, códigos, enlaces cualquier cosa que deseamos ocultar la
debemos incluir en este espacio.
Unos datos más a recordar:
El valor del tamaño de la imagen podéis modificarlo en width y height o escoger el grosor del borde de la imagen en borde.
Al igual que ymmot añadí una imagen en el espacio para clicar, si no os gusta una imagen en su lugar podéis añadir texto.
clica aquí
¿Un café?
Vídeos, música, un listado, códigos, enlaces cualquier cosa que deseamos ocultar la
debemos incluir en este espacio.
¿Cómo añadimos texto?
Sustituimos <img borde='0' height='35' src='aquí la url de la imagen' width='35'/> por cualquier texto.
Y eso es todo que no es poco :)
Gracias ymmot